import './SecurityTrain.scss'
import { useState } from 'react'
import { project } from '../../../../Common/Data'
import { useMount, useRequest, useSize } from 'ahooks'
import { Http } from '../../../../Common/Api'

import { TitleSmall001 } from '../Common/SmallTitle'
import { ColumnConfigA01Template } from './AssetsCharts'
import { useRef } from 'react'
import { FrontModalBox } from '../Modal'

const { imageUrl } = project[window.location.hostname]

export const SecurityTrainA01 = () => {
    const List = [
        { uuid: 1, icon: 'Train01.png', title: '培训人数', value: 'totalPersonCount', unit: '人', color: '#FFCB4F' },
        {
            uuid: 2,
            icon: 'Train02.png',
            title: '培训次数',
            value: 'securityTrainCount',
            unit: '人/次',
            color: '#48EDCF',
        },
        { uuid: 3, icon: 'Train03.png', title: '总计时长', value: 'totalDuration', unit: 'H', color: '#FF8E43' },
    ]
    const [Data, setData] = useState({ totalPersonCount: 0, securityTrainCount: 0, totalDuration: 0 })

    const { runAsync } = useRequest(Http, { manual: true, onSuccess: res => setData(res) })

    useMount(() => {
        runAsync({ url: 'getSecurityTrainStat' })
    })

    return (
        <div className="SecurityTrainA01">
            {List.map(({ uuid, icon, title, value, unit, color }) => (
                <div key={uuid}>
                    <div>
                        {' '}
                        <img src={imageUrl + icon} alt="" />{' '}
                    </div>
                    <div>
                        <div>
                            <div style={{ color }}>{Data[value]}</div>
                            <div>{unit}</div>
                        </div>
                        <div>{title}</div>
                    </div>
                </div>
            ))}
        </div>
    )
}

export const SecurityTrainA02 = ({ title }) => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)

    const [Data, setData] = useState()

    const style = {
        ColumnColor:
            'l(90) 0:rgba(155, 253, 255, 1) 1:rgba(155, 253, 255, 0.2)&l(90) 0:rgba(255, 218, 138, 1) 1:rgba(255, 218, 138, 0.4)&l(90) 0:rgba(199, 255, 239, 1) 1:rgba(199, 255, 239, 0.4)&l(90) 0:rgba(152, 179, 255, 1) 1:rgba(152, 179, 255, 0.4)&l(90) 0:rgba(0, 133, 88, 1) 1:rgba(0, 133, 88, 0.4)',
        ColumnWidth: 16,
        ColumnLegend: false,
        LegendPossion: 'top',
        LegendoffsetY: 10,
        Legendfill: '#B2FBFD',
        LegendfontSize: 12,
        XLine: '#B2FBFD',
        XLabel: '#B2FBFD',
        XTick: '#B2FBFD',
        YTitle: '次',
        YTColor: '#B2FBFD',
        YPosi: 'end',
        YAuto: true,
        YOffset: 50,
        YColoc: '#B2FBFD',
        YNumber: 5,
        YGrid: 'rgba(155, 253, 255, 0.35)',
        BarStatus: false,
        BarHeight: 8,
        BarWidth: 80,
        BarTrack: 'rgba(178, 251, 253, 0.2)',
        BarThumb: 'rgba(178, 251, 253, 1)',
        BarHover: '#367EF2',
    }

    const { runAsync } = useRequest(Http, { manual: true })
    const [OptionsCall, setOptionsCall] = useState()

    useMount(() => {
        runAsync({ url: 'getSecurityTrainMonthStat' }).then(res => {
            setData(
                res.map(({ month, securityTrainCount }) => ({
                    name: '培训次数',
                    type: month,
                    value: securityTrainCount,
                })),
            )
        })
    })

    const click = () => {
        setOptionsCall({
            type: 'TableList',
            data: { title: '安全培训详情', type: 'SecurityTrainDetails' },
        })
    }

    return (
        <div className="SecurityTrainA02">
            <TitleSmall001 title={title} />
            <div className="Charts" ref={ChartsBox}>
                {size && Data && <ColumnConfigA01Template data={Data} size={size} style={style} click={click} />}
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
